<template>
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 10px;" v-permission="'/sysDictData/getList'">
            <el-select v-model="dictTypeUid" placeholder="请选择字典名称" style="width:150px">
                <el-option v-for="item in dictTypeList" :key="item.uid" :label="item.dictName"
                    :value="item.uid"></el-option>
            </el-select>

            <el-input clearable @keyup.enter.native="handleFind" class="filter-item" style="width: 200px;margin-left: 10px;"
                v-model="dictLabelQuery" placeholder="请输入字典标签"></el-input>

            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFind"
                v-permission="'/sysDictData/getList'" style="margin-left: 10px;">查找</el-button>
            <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-edit"
                v-permission="'/sysDictData/add'">添加</el-button>
            <el-button class="filter-item" type="danger" @click="handleDeleteBatch" icon="el-icon-delete"
                v-permission="'/sysDictData/deleteBatch'">删除选中</el-button>
        </div>

        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

            <el-table-column label="字典标签" width="100" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.dictLabel }}</span>
                </template>
            </el-table-column>

            <el-table-column label="字典键值" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.$index % 5 == 0" type="warning">{{ scope.row.dictValue }}</el-tag>
                    <el-tag v-if="scope.$index % 5 == 1" type="success">{{ scope.row.dictValue }}</el-tag>
                    <el-tag v-if="scope.$index % 5 == 2" type="info">{{ scope.row.dictValue }}</el-tag>
                    <el-tag v-if="scope.$index % 5 == 3" type="danger">{{ scope.row.dictValue }}</el-tag>
                    <el-tag v-if="scope.$index % 5 == 4">{{ scope.row.dictValue }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="字典类型" width="200" align="center">
                <template slot-scope="scope">
                    <el-tag>{{ scope.row.sysDictType.dictType }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="是否默认" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isDefault == 1">是</el-tag>
                    <el-tag type="warning" v-if="scope.row.isDefault == 0">否</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="回显样式" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.listClass == 'default'">{{ scope.row.listClass }}</el-tag>
                    <el-tag v-if="scope.row.listClass == 'success'" type="success">{{ scope.row.listClass }}</el-tag>
                    <el-tag v-if="scope.row.listClass == 'primary'" type="primary">{{ scope.row.listClass }}</el-tag>
                    <el-tag v-if="scope.row.listClass == 'info'" type="info">{{ scope.row.listClass }}</el-tag>
                    <el-tag v-if="scope.row.listClass == 'warning'" type="warning">{{ scope.row.listClass }}</el-tag>
                    <el-tag v-if="scope.row.listClass == 'danger'" type="danger">{{ scope.row.listClass }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="50" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sort }}</span>
                </template>
            </el-table-column>

            <el-table-column label="发布状态" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isPublish == '1'">上架</el-tag>
                    <el-tag type="danger" v-else>下架</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="备注" width="200" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark }}</span>
                </template>
            </el-table-column>

            <el-table-column label="创建时间" width="160" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <span>正常</span>
                    </template>
                    <template v-if="scope.row.status == 2">
                        <span>推荐</span>
                    </template>
                    <template v-if="scope.row.status == 0">
                        <span>已删除</span>
                    </template>
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" min-width="240">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="primary" size="small"
                        v-permission="'/sysDictData/edit'">编辑</el-button>
                    <el-button @click="handleDelete(scope.row)" type="danger" size="small"
                        v-permission="'/sysDictData/deleteBatch'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
import { getSysDictTypeList } from "@/api/sysDictType"
import { addSysDictData, deleteBatchSysDictData, editSysDictData, getSysDictDataList } from "@/api/sysDictData"

export default {
    name: '',
    created() {
        this.dictTypeUid = this.$route.query.dictTypeUid
        this.sysDictTypeList();
        this.sysDictDataList();
    },
    data() {
        return {
            dictTypeUid: null, // 从SysDictType传递过来的
            dictTypeMap: {}, // DictType对象集合
            dictLabelQuery: "", // 字典标签查询
            multipleSelection: [], //多选，用于批量删除
            dictTypeList: [],
            tableData: [],
            keyword: "",
            currentPage: 1,
            pageSize: 10,
            total: 0, //总数量
            title: "增加字典数据",
            dialogFormVisible: false, //控制弹出框
            formLabelWidth: "120px",
            isEditForm: false,
            form: {},
            listClassType: [
                { key: 1, label: "default", value: 'default' },
                { key: 2, label: "primary", value: 'primary' },
                { key: 3, label: "success", value: 'success' },
                { key: 4, label: "info", value: 'info' },
                { key: 5, label: "warning", value: 'warning' },
                { key: 6, label: "danger", value: 'danger' }
            ],
            rules: {
                dictLabel: [
                    { required: true, message: '字典标签不能为空', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1到20个字符' },
                ],
                dictValue: [
                    { required: true, message: '字典键值不能为空', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1到20个字符' },
                ],
                dictTypeUid: [
                    { required: true, message: '字典类型不能为空', trigger: 'blur' },
                ],
                isDefault: [
                    { required: true, message: '系统默认不能为空', trigger: 'blur' }
                ],
                isPublish: [
                    { required: true, message: '发布状态不能为空', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '排序字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数' },
                ]
            }
        };
    },
    methods: {
        sysDictTypeList() {
            let params = {};
            params.keyword = '';
            params.currentPage = 0;
            params.pageSize = 100;
            getSysDictTypeList(params).then(response => {
                if (response.code == 200) {
                    this.dictTypeList = response.data.records;
                }
            });
        },
        sysDictDataList() {
            let params = {};
            params.dictTypeUid = this.dictTypeUid;
            params.dictLabel = this.dictLabelQuery;
            params.currentPage = this.currentPage;
            params.pageSize = this.pageSize;
            getSysDictDataList(params).then(response => {
                this.tableData = response.data.records;
                this.currentPage = response.data.current;
                this.pageSize = response.data.size;
                this.total = response.data.total;
            })
        },
        handleFind() {

        },
        handleAdd() {

        },
        handleDeleteBatch() {

        },
        handleEdit() {

        },
        handleDelete() {

        },
        handleSelectionChange() {
            this.multipleSelection = val;
        }
    }
}
</script>

<style scoped></style>